<template>
    <div class="guanliyuanliebiao">
        <div>
            <a-button type="primary" class="editable-add-btn" @click="handleAdd">
            +新增管理员
            </a-button>
            <a-input-search
                v-model="searchValue"
                placeholder="input search text"
                enter-button
                style="width: 300px"
                @search="onSearch(searchValue)"
                />
            <a-table bordered :data-source="dataSource" :columns="columns">
            <template slot="name" slot-scope="text, record">
                <editable-cell :text="text" @change="onCellChange(record.key, 'name', $event)" />
            </template>
            <template slot="account" slot-scope="text, record">
                <editable-cell :text="text" @change="onCellChange(record.key, 'account', $event)" />
            </template>
            <template slot="email" slot-scope="text, record">
                <editable-cell :text="text" @change="onCellChange(record.key, 'email', $event)" />
            </template>
            <template slot="character" slot-scope="text, record">
                <editable-cell :text="text" @change="onCellChange(record.key, 'character', $event)" />
            </template>
            <template slot="operation" slot-scope="text, record">
                <a-popconfirm
                v-if="dataSource.length"
                title="Sure to delete?"
                @confirm="() => onDelete(record.key)"
                >
                <a href="javascript:;">删除&nbsp;</a>
                </a-popconfirm>
                <a-popconfirm
                v-if="dataSource.length"
                title="Sure to delete?"
                @confirm="test"
                >
                <a href="javascript:;">&nbsp; &nbsp; &nbsp;重置密码</a>
                </a-popconfirm>
            </template>
            </a-table>
        </div>
    </div>
</template>

<script>
import EditableCell from './EditableCell'

export default {
    components:{
        EditableCell,
    },
    mounted() {
        this.axios.defaults.headers.common['Authorization'] = window.sessionStorage.getItem('token')
        this.axios.post('/user/query_superuser/').then((res)=>{
            console.log(res)
            this.dataSource = res
        })
    },
    data() {
        return {
            searchValue:'',
            dataSource:[],
            // dataSource: [
            // {
            // key: '0',
            // name: '欧阳欣',
            // account: '2020110780',
            // email: '123@163.com',
            // character: '超级管理员',
            // lastloginTime: '2021-5-26',
            // password:'123456'
            // },
            // {
            // key: '1',
            // name: '李想',
            // account: '2020110779',
            // email: '456@163.com',
            // character: '超级管理员',
            // lastloginTime: '2021-5-26',
            // password:'123456'
            // },
            // ],
            count: 2,
            columns: [
                {
                title: '姓名',
                dataIndex: 'name',
                scopedSlots: { customRender: 'name' },
                },
                {
                title: '账号(学工号)',
                dataIndex: 'account',
                scopedSlots: { customRender: 'account' },
                },
                {
                title: '邮箱',
                dataIndex: 'email',
                scopedSlots: { customRender: 'email' },
                },
                {
                title: '角色',
                dataIndex: 'character',
                scopedSlots: { customRender: 'character' },
                },
                {
                title: '最近登录时间',
                dataIndex: 'lastloginTime',
                },
                {
                title: '操作',
                dataIndex: 'operation',
                scopedSlots: { customRender: 'operation' },
                },
            ],
        }
    },
    methods: {
        onCellChange(key, dataIndex, value) {
            const dataSource = [...this.dataSource];
            const target = dataSource.find(item => item.key === key);
            if (target) {
                target[dataIndex] = value;
                this.dataSource = dataSource;
            }
            },
            onDelete(key) {
            const dataSource = [...this.dataSource];
            this.dataSource = dataSource.filter(item => item.key !== key);
            },
            handleAdd() {
            const { count, dataSource } = this;
            const newData = {
                key: count,
                name: `name${count}`,
                account: 'account',
                email: `email`,
                character:'character',
                lastloginTime:'lastloginTime',
            };
            this.dataSource = [...dataSource, newData];
            this.count = count + 1;
            },
            test(){
                console.log(this.dataSource)
            },
            onSearch(searchValue){
                this.axios.post('/user/query_superuser/').then((res)=>{
                    console.log(res)
                    this.dataSource = res
                })
            }
    },
}
</script>

<style lang="scss">
    .guanliyuanliebiao{
        .editable-cell {
        position: relative;
        }

        .editable-cell-input-wrapper,
        .editable-cell-text-wrapper {
        padding-right: 24px;
        }

        .editable-cell-text-wrapper {
        padding: 5px 24px 5px 5px;
        }

        .editable-cell-icon,
        .editable-cell-icon-check {
        position: absolute;
        right: 0;
        width: 20px;
        cursor: pointer;
        }

        .editable-cell-icon {
        line-height: 18px;
        display: none;
        }

        .editable-cell-icon-check {
        line-height: 28px;
        }

        .editable-cell:hover .editable-cell-icon {
        display: inline-block;
        }

        .editable-cell-icon:hover,
        .editable-cell-icon-check:hover {
        color: #108ee9;
        }

        .editable-add-btn {
        margin-left: 18px;
        margin-bottom: 30px;
        margin-right: 700px;
        }
    }
</style>